<template>
    <div class="login_content">
        <div class="login_top">
            <p v-if="store_name != ''">{{ store_name }}</p>
            <div>专注健康与财富的专业平台</div>
        </div>
        <div class="login_info box">
            <div class="share-info-header">
                <div class="share-info-image">
                      <img
                          round
                          width="100%"
                          height="100%"
                          src="../../assets/img/login_logo.jpg"
                      />
                </div>
            </div>
            <div class="input_div">
                <div>
                    <label for="" class="iconfont">
                        <img src="https://meibaolianmeng.oss-cn-beijing.aliyuncs.com/cdn/phone.png?x-oss-process=image/interlace,1/format,png" />
                    </label>
                    <input type="number" v-model="form.phone" placeholder="请输入手机号码">
                </div>
                <div v-if="type=='password'">
                    <label for="" class="iconfont">
                        <img src="https://meibaolianmeng.oss-cn-beijing.aliyuncs.com/cdn/password1.png?x-oss-process=image/interlace,1/format,png" />
                    </label>
                    <input type="password" v-model="form.password" placeholder="请输入密码">
                </div>
                <div v-if="type=='code'" style="position: relative;">
                    <label for="" class="iconfont">
                        <img src="https://meibaolianmeng.oss-cn-beijing.aliyuncs.com/cdn/code1.png?x-oss-process=image/interlace,1/format,png" />
                    </label>
                    <van-button @click="getCode" :disabled="disabled" type="warning" class="get_code">{{text}}</van-button>
                    <input type="number" v-model="form.code" placeholder="请输入验证码">
                </div>
            </div>
            <div class="forget"><span @click="goForget">忘记密码</span></div>
            <div class="register"><span class="left">还没有账号?</span><span class="right" @click="wxLoginFunc">立即注册</span></div>
        </div>
        <div class="login_button">
          <van-button v-if="type=='password'" class="submi_btn" @click="passwordLogin" :loading="loading" type="info" loading-text="登录中...">登录</van-button>
          <van-button v-if="type=='code'" class="submi_btn" @click="codeLogin" :loading="loading" type="info" loading-text="登录中...">登录</van-button>
        </div>

        <div class="login_ways box">
            <van-divider
              :style="{ color: '#a6a6a6', borderColor: '#e3e3e3', padding: '0 16px' }"
            >
              其他方式登录
            </van-divider>
            <div class="fl wechat" @click="wxLoginFunc">
                <span>
                    <img src="../../assets/img/login_wechat.png" />
                </span>
                <p>微信登录</p>
            </div>
            <div class="fl code" v-if="type=='password'" @click="type='code'">
                <span>
                    <img src="../../assets/img/login_code.png" />
                </span>
                <p>验证码登录</p>
            </div>
            <div class="fl password" v-if="type=='code'" @click="type='password'">
                <span>
                    <img src="https://meibaolianmeng.oss-cn-beijing.aliyuncs.com/cdn/password.png" />
                </span>
                <p>密码登录</p>
            </div>
        </div>
    </div>
</template>
<script>
import { getOauthCode, wxLogin, passwordLogin, sendCode, codeLogin, getStoreName } from "@/api/user"
import { setToken } from '@/utils/auth'
import { Toast } from 'vant'
import Vue from 'vue'
import { Button,Divider  } from 'vant';

Vue.use(Button).use(Divider)
export default {
    name: 'login',
    mounted() {
        this.redirectCodeUrl()
        this.getStoreName()
    },
    data () {
        return {
          store_name: '',
          form: {
              storeId: 0,
              phone: '',
              password: '',
              code: ''
          },
          loading: false,
          type: 'password',
          disabled: false,
          text: '获取验证码'
        }
    },
    methods: {
        goForget() {
            this.$router.push({path: 'password', query: {type: 'forget', storeId: this.form.storeId}})
        },
        redirectCodeUrl() {
            this.form.storeId = 3//this.$route.query.storeId
            const code = this.$route.query.code
            if (code !== undefined) return
            const obj = {
                storeId: this.form.storeId,
                redirectType: "/login?storeId=" + this.form.storeId
            }
            getOauthCode(obj).then(response => {
                if (response.data.res) {
                    location.href = response.data.url
                } else {
                  Toast.fail({message: '无效店铺', duration: 2000})
                }
            })
        },
        wxLoginFunc() {
            const toast = Toast.loading({
              duration: 0,
              message: '登陆中...',
            });
            const code = this.$route.query.code
            const obj = {storeId: this.form.storeId, code: code}
            wxLogin(obj).then(response => {
                toast.clear()
                if (response.data.res) {
                    setToken(response.data.token)
                    Toast.success({message: '登录成功', duration: 2000})
                    this.$router.push({path: '/person'})
                } else {
                    location.href = "/login?storeId=" + this.form.storeId
                }
            })
        },
        passwordLogin() {
            this.loading = true
            const toast = Toast.loading({
              duration: 0,
              message: '登陆中...',
            });
            passwordLogin(this.form).then(res => {
                toast.clear()
                this.loading = false
                if (res.code === 20000) {
                    setToken(res.data)
                    Toast.success({message: '登录成功', duration: 2000})
                    this.$router.push({path: '/person'})
                } else {
                    Toast.fail({message: res.info, duration: 2000})
                }
            })
        },
        getCode() {
            const toast = Toast.loading({
              duration: 0,
              message: '短信发送中...',
            });
            const obj = {
                storeId: this.form.storeId,
                phone: this.form.phone,
                handlerType: 'login'
            }
            sendCode(obj).then(res => {
                toast.clear()
                if (res.code === 20000) {
                    Toast.success({message: '发送成功', duration: 2000})
                    this.waitAgain()
                } else {
                    Toast.fail({message: res.info, duration: 2000})
                }
            })
        },
        waitAgain() {
            let code = 60
            const that = this
            const id = setInterval(function() {
                that.disabled = true
                that.text = `${--code}s后再试`
                if (code === 1) {
                    that.text = "获取验证码"
                    that.disabled = false
                    clearTimeout(id)
                }
            }, 1000)
        },
        codeLogin() {
            this.loading = true
            const toast = Toast.loading({
              duration: 0,
              message: '登陆中...',
            });
            codeLogin(this.form).then(res => {
                toast.clear()
                this.loading = false
                if (res.code === 20000) {
                    setToken(res.data)
                    Toast.success({message: '登录成功', duration: 2000})
                    this.$router.push({path: '/person'})
                } else {
                    Toast.fail({message: res.info, duration: 2000})
                }
            })
        },
        getStoreName() {
            getStoreName({storeId: this.form.storeId}).then(res => {
                this.store_name = res.data
            })
        }
    }
}
</script>

<style lang="stylus" scoped>
    .login_content
        width 100%
        height 100%
        overflow hidden
        background #fff
        .login_top
            width 100%
            height 5rem
            background: url(../../assets/img/login_top.jpg) no-repeat;
            background-position: 0;
            background-size: 100%;
            p
                text-align: center
                font-size: 1rem
                font-weight: 400
                padding-top: 1rem;
                width: 90%;
                margin: auto;
                color: white;
                letter-spacing: 6px;
            div
                text-align: center;
                padding-top: .3rem;
                width: 90%;
                margin: auto;
                color: #f7fbfe;
                letter-spacing: 6px;
        .login_info
            width: 90%;
            background: #fff;
            border-radius: .1rem;
            margin: 0 auto;
            padding: .1rem .3rem;
            box-shadow: 0.6px 1px 2px 0.5px rgba(209,193,191, 0.38);
            border: 1px solid #f0edef;
            bottom: .9rem;
            position: relative;
            .share-info-header
                display: flex;
                justify-content: center;
                height: 1.5rem;
              .share-info-image
                width: 2rem;
                height: 2rem;
                position: relative;
                bottom: 1rem;
              .share-info-image img
                width: 100%;
                height: 100%;
                border-radius: 50%;
            .input_div
                .get_code
                    position: absolute
                    right: 0
                    height: .7rem
                    top: .1rem
                    background: #d64532
                    border: #d64532
                    div
                      border: 0;
                      height: auto;
                      line-height: unset;
                      margin: auto;
                div
                    width: 100%;
                    overflow: hidden;
                    height: .9rem;
                    line-height: .9rem;
                    border: 1px solid #b6b6b6;
                    border-radius: .25rem;
                    margin-bottom: .5rem;
                    label
                        width 15%
                        text-align center
                        display inline-block
                        line-height .9rem
                    input
                        width 65%
                        border none
                        text-align left
                        display inline-block
                        line-height 1rem
                        height .9rem
                        font-size .28rem
                        background #fff
                        &::-webkit-input-placeholder
                            color #ccc
                            font-size .28rem
                            text-align left
                    .tel_lab
                        color: #d64532
            .forget
                padding-bottom 1rem
                width 100%
                text-align right
            .register
                padding-bottom .7rem
                width 100%
                text-align right
                .left
                  padding-right 2rem
                  color #9c9c9c
        .login_button
            width 80%
            margin auto
            .submi_btn
                width 100%
                border: 1px solid #ff3015;
                background: #ff3015;
                border-radius: .25rem;
        .login_ways
            width 60%
            margin auto
            span
                display block
                width 100%
                text-align center
                color #a4a2a2
                img
                    width: 100%;
                    height: 100%;
            p
                width 100%
                color #a6a6a6
                font-size .26rem
                text-align center
                margin-top .2rem
            .fl
                margin-bottom: .5rem;
                width: 1.2rem;
            .wechat
                float: left
                margin-left: 13%
            .code
                float: right
                margin-right: 13%
            .password
                float: right
                margin-right: 13%


</style>
